<template>
  <div class="flow_handle">
    <div class="open_clos_title" @click="handOpenClos">
      <div class="title">{{ title }}</div>
      <span class="el-icon-arrow-down" v-if="show" style="color: #666"></span>
      <span class="el-icon-arrow-up" v-else style="color: #666"></span>
    </div>
    <el-collapse-transition>
      <div class="flow_bgc" v-show="show">
        <div class="source_box">
          <div class="my_required title">输出源</div>
          <el-select
            v-model="outputSource"
            @change="changeOutputSource"
            placeholder="请选择"
            style="width: 100%"
            size="small"
          >
            <el-option
              v-for="item in sourceCellNames"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flow_as">
          <el-checkbox style="margin-bottom: 10px" v-model="flowAs"
            >作为</el-checkbox
          >
          <el-input
            @input="inputExtensions"
            v-if="flowAs"
            placeholder="请输入"
            v-model="flowAsVal"
            size="small"
          ></el-input>
        </div>
        <div class="flow_as">
          <span class="title"> 单向: </span>
          <el-radio-group v-model="isUnidirectional">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </div>
        <div>
          <el-checkbox v-model="streamHandlerChecked">流处理程序</el-checkbox>
        </div>
        <div class="flow_content" v-if="streamHandlerChecked">
          <FlowHandle
            valueType="fName"
            @updateList="updateList"
            ref="flowHandleRef"
            @handAdd="handAdd"
            :list="streamHandlerList"
            @handOpenItem="handOpenItem"
            @handInput="handInput"
            @submit="submit"
            @handItemAdd="handItemAdd"
            @handItemDel="handItemDel"
            @changeType="changeType"
            :objKey="objKey"
            :typeList="typeList"
            @handDel="handDel"
            @changeRadio="changeRadio"
          ></FlowHandle>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import FlowHandle from "@/components/FlowHandleList/index";
import { generateId, delay } from "@/utils/index";
import { typeList } from "@/utils/local";
import { myMixin } from "@/mixin/flowHandle";
export default {
  mixins: [myMixin],
  components: { FlowHandle },
  props: {
    title: {
      type: String,
      default: "left",
    },
    sourceCellNames: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isUnidirectional: false,
      show: false,
      flowAsVal: "",
      flowAs: false,
      outputSource: "",
      streamHandlerChecked: false,
      name: "",
      streamHandlerList: [],
      typeList: typeList,
      rowItem: {},
      rowId: "",
      objKey: "",
      options: [
        {
          name: "guanTable",
          id: "guanTable",
        },
        {
          name: "csvStream",
          id: "csvStream",
        },
      ],
    };
  },
  methods: {
    changeOutputSource(val) {
      const name = this.sourceCellNames.find((item) => item.name != val).name;
      this.$emit(
        "changeOutputSource",
        this.title,
        name,

        this.flowAs,
        this.flowAsVal,
        this.isUnidirectional
      );
    },
    inputExtensions(val) {
      delay(() => {
        this.$store.commit("projection/setLRname", {
          keyName: "funArrAll",
          isLeftRight: this.title,
          val,
        });
        this.$emit("inputExtensions", val);
      }, 1);
    },
    handOpenClos() {
      this.show = !this.show;
    },
    getFlowData() {
      // 流处理数据获取
      // 选中了在返回,否则返回空数组
      return {
        streamHandlerList: this.streamHandlerChecked
          ? this.setFlow(this.streamHandlerList)
          : [],
        streamHandlerChecked: this.streamHandlerChecked,
        as: this.flowAsVal,
        isUnidirectional: this.isUnidirectional,
        type: "STREAM",
        from: this.outputSource,
      };
    },
  },
};
</script>

<style scoped lang='scss'>
.title {
  font-size: 14px;
  color: #666;
}
.flow_handle {
  width: 100%;
  .source_box {
    margin-bottom: 16px;
    .title {
      margin-bottom: 12px;
    }
  }
  .open_clos_title {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    cursor: pointer;
    .title {
      margin-right: 6px;
    }
  }
  .flow_bgc {
    padding: 10px;
    background: rgba(233, 233, 233, 0.3);
  }
  .flow_as {
    margin-bottom: 10px;
    .title {
      margin-right: 10px;
    }
    /deep/ .el-radio {
      margin-right: 0;
      width: 50px;
    }
  }
  .flow_content {
    margin-top: 10px;
  }
}
</style>